---

import PageLayout from "@/layouts/Base.astro";

import Weather from "@/components/now/Weather.astro";

import { POSTS_API } from "@/data/constants";

import { createMarkdownRenderer } from "@/utils";

export const prerender = false;

const md = await createMarkdownRenderer();

const { slug } = Astro.params;

if (!slug) {

	return Astro.redirect("/now");

}

interface PostDetail {

	short_id: string;

	title: string | null;

	slug: string;

	alias: string | null;

	canonical_url: string | null;

	published_date: string | null;

	meta_description: string | null;

	meta_image: string | null;

	lang: string;

	tags: string | null;

	content: string;

	created_at: string;

	updated_at: string;

	weather: string | null;

}

let title: string | null = "Post";

let description = "A post";

let contentHTML = "";

let publishedAt = "";

let errorMessage = "";

let weatherRaw = "";

let isError = false;

try {

	const res = await fetch(`${POSTS_API}/posts/${encodeURIComponent(slug)}`);

	if (res.status === 404) {

		Astro.response.status = 404;

		isError = true;

		title = "Not Found";

		errorMessage = "The post you're looking for doesn't exist.";

	} else if (!res.ok) {

		throw new Error(`HTTP ${res.status}`);

	} else {

		const post = (await res.json()) as PostDetail;

		title = post.title;

		description =

			post.meta_description ||

			(post.content ? post.content.slice(0, 160) : description);

		publishedAt = post.published_date

			? new Date(post.published_date).toLocaleDateString()

			: "";

		contentHTML = md.render(post.content || "");

		weatherRaw = post.weather || "";

	}

} catch (err) {

	console.error("Error fetching post:", err);

	Astro.response.status = 500;

	isError = true;

	title = "Error";

	errorMessage = "Something went wrong while loading this post.";

}

const meta = {

	title: title || "Post",

	description,

};

---

<PageLayout meta={meta}>

	<article>

		{isError ? (

			<>

				<h1 class="title mb-4">{title}</h1>

				<p class="text-zinc-400 mb-8">{errorMessage}</p>

				<a class="style-link" href="/now">&larr; Back to Now</a>

			</>

		) : (

			<>

				{title && <h1 class="title mb-2">{title}</h1>}

				<div class="flex text-sm text-zinc-400 items-center gap-x-3 gap-y-1 flex-wrap">

					<time>{publishedAt}</time>

					{weatherRaw && <Weather leadingSeparator weather={weatherRaw} />}

				</div>

				<div class="prose prose-invert max-w-none my-4">

					<Fragment set:html={contentHTML} />

				</div>

				<div class="mt-12 flex items-center justify-between">

					<a class="style-link" href="/now">&larr; Now</a>

          <div class="flex gap-6">

            <button

              id="share-btn"

              class="text-sm text-zinc-500 hover:text-zinc-700 transition-colors"

            >

              Share

            </button>

              <a 

                class="text-sm text-zinc-500 hover:text-zinc-700 transition-colors"

                href={ `mailto:contact@stevedylan.dev?subject=${'Re: ' + title}` }

                >

                Reply via Email

              </a>

          </div>

				</div>

			</>

		)}

	</article>

</PageLayout>

<script>

	const btn = document.getElementById("share-btn");

	if (btn) {

		btn.addEventListener("click", () => {

			const url = window.location.href;

			navigator.clipboard

				.writeText(url)

				.then(() => {

					const originalText = btn.textContent;

					btn.textContent = "Copied!";

					setTimeout(() => {

						btn.textContent = originalText;

					}, 2000);

				})

				.catch((err) => {

					console.error("Failed to copy URL:", err);

					alert("Failed to copy URL");

				});

		});

	}

</script>